<template>
	<view class="index">
		<view class="content">
			<view class="banner">
				<u-swiper interval="6000" height='300' indicator-pos='bottomRight' mode='rect' :list="bannerlist"></u-swiper>
			</view>
			<u-cell-group>
				<u-cell-item icon="map" title="选择地点"></u-cell-item>
				<u-cell-item icon="calendar" title="选择时间" :value="date" @click='selectTime'></u-cell-item>
				<u-cell-item  title="选择项目"></u-cell-item>
			</u-cell-group>
			<view class="submit">
				<u-button :custom-style="customStyle">立即预定</u-button>
			</view>
			<swiper class="swiper" indicator-dots="true" autoplay>
			    <swiper-item>
			        <u-grid :col="3" :border='false'>
			        	<u-grid-item>
							<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
						<u-grid-item>
							<image src="../../static/1.jpg" mode=""></image>
						</u-grid-item>
						<u-grid-item>
							<image src="../../static/1.jpg" mode=""></image>
						</u-grid-item>
						<u-grid-item>
							<image src="../../static/1.jpg" mode=""></image>
						</u-grid-item>
			        </u-grid>
			    </swiper-item>
			    <swiper-item>
			        <u-grid :col="3" :border='false'>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        	<u-grid-item>
			        		<image src="../../static/1.jpg" mode=""></image>
			        	</u-grid-item>
			        </u-grid>
			    </swiper-item>
			</swiper>
			
		</view>
		<u-calendar :min-date='minDate' :max-date='maxDate' v-model="timeshow" :mode="mode" @change='changeDate'></u-calendar>
		<Login ref='login'></Login>
	</view>
</template>

<script>
	
	import Login from "../login/index.vue"
	export default {
		components:{
			Login
		},
		data() {
			return {
				customStyle: {
					backgroundColor: '#606266', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#ffffff',
					border:'0'
				},
				minDate:null,//最小日期范围
				maxDate:null,//最大日期范围
				date:null,//选择的日期
				show: false, //弹窗
				timeshow:false,//时间弹窗
				mode:'range',//选择时间类型
				bannerlist:[
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/1.jpg'
				]
			}
		},
		onShow() {
			this.$refs.login.authorize()
			
		},
		onLoad() {
			
		},
		created() {
			this.minDate = this.dateFormat(new Date())
			this.date = `${this.minDate}至${this.minDate}`
			this.maxDate = this.dateFormat(new Date(new Date().getTime() + 3600 * 1000 * 24 * 30))
			console.log(this.minDate,this.maxDate)
		},
		methods: {
			//选择时间
			changeDate(e){
				console.log(e)
				this.date = `${e.startDate}至${e.endDate}`
			},
			selectTime(){
				console.log('选择时间')
				this.timeshow = true
			},
			//日期格式化
			dateFormat(date){
				let Y = date.getFullYear()
				let M = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
				let D = date.getDate()<10?`0${date.getDate()}`:date.getDate()
				return `${Y}-${M}-${D}`
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index {
		.submit{
			width: 95%;
			margin: 20rpx auto;
			
		}
		.swiper{
			height: 450rpx;
			image{
				width: 80%;
				height: 66rpx;
			}
		}
	}
</style>
